<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script src="/js/register.js"></script>
</head>
<div class="login-container">
    <form class="login-form">
        <h2>新用户注册</h2>
        <div class="input-group">
            <label for="userName">用户名:</label>
            <input type="text" id="userName" required><br>
            <label for="userName">请输入1-10个字符</label>
        </div>

        <div class="input-group">
            <label for="pwd">用户密码:</label>
            <input type="password" id="pwd" required><br>
            <label for="pwd">请输入1-10个字符</label>
            <span id="passwordMatchError" style="color:red; display:none;">密码不一致</span>
        </div>
        <div class="input-group">
            <label for="pwd">密码确认:</label>
            <input type="password" id="repeatPwd" required><br>
            <label for="pwd">请输入1-10个字符，要与密码相同:</label>
        </div>

        <script>
            const pwdInput = document.getElementById('pwd');
            const repeatPwdInput = document.getElementById('repeatPwd');
            const passwordMatchError = document.getElementById('passwordMatchError');
            repeatPwdInput.addEventListener('blur', () => {
                if (pwdInput.value !== repeatPwdInput.value) {
                    passwordMatchError.style.display = 'inline';
                } else {
                    passwordMatchError.style.display = 'none';
                }
            });
        </script>

        <div class="input-group">
            <label for="pwd">用户邮件:</label>
            <input type="text" id="email" required><br>
            <label for="pwd">形如@qq.com</label>
        </div>
        <label >用户头像:</label>

        <input type="radio" name="img" value="img/01.png"><img src="img/01.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/02.png"><img src="img/02.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/03.png"><img src="img/03.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/04.png"><img src="img/04.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/05.png"><img src="img/05.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/06.png"><img src="img/06.png" width="50px" height="50px">
        <input type="radio" name="img" value="img/07.png"><img src="img/07.png" width="50px" height="50px">
        <div id="errorDiv" style="color: red"></div>
        <button type="button" class="login-button" value="注册" onclick="register()">注册</button>
        <button type="reset" class="login-button" >重置</button>
    </form>
</div>
<body>

</body>
</html>